<template>
  <div class="main-wrap">
    <navigators :back-text="back" :bg-color="bgColor"></navigators>
    <div class="main-banners" :style="{height:heights+'px'}">

      <yd-slider direction="vertical">
        <yd-slider-item>
        <div class="product-01" :style="{height:heights+'px'}">
          <div class="el-car-con">
            <el-carousel :interval="4000" type="card" height="8.3rem">
              <el-carousel-item v-for="item in arraysPic" :key="item.id">

                <div class="img-con">
                  <img :src="item.srcs" />
                  <div class="title-con">
                    {{item.tit}}
                  </div>
                </div>

              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </yd-slider-item>
      <yd-slider-item>
        <div class="product-02" :style="{height:heights+'px'}">
          <div class="el-car-con">
            <el-carousel :interval="4000" type="card" height="8.4rem">
              <el-carousel-item v-for="item in arraysPic1" :key="item.id">

                <div class="img-con">
                  <img :src="item.srcs" />
                </div>
                <div class="title-con">
                  {{item.tit}}
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </yd-slider-item>

      <yd-slider-item>
        <div class="product-03" :style="{height:heights+'px'}">
          <div class="el-car-con">
            <el-carousel :interval="4000" type="card" height="8.6rem">
              <el-carousel-item v-for="item in arraysPic2" :key="item.id">

                <div class="img-con">
                  <img :src="item.srcs" />
                </div>
                <div class="title-con">
                  {{item.tit}}
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </yd-slider-item>
        <yd-slider-item>
          <div class="pattern-bottom-con">

          </div>
        </yd-slider-item>

      </yd-slider>
    </div>



  </div>
</template>

<script>
  import navigators from '../components/headers.vue';
  import scrolls from '../components/scroll.vue'
  export default {
    name: 'index',
    data () {
      return {
        heights:window.innerHeight,
        back:"返回",
        bgColor:'none',
        heights:window.innerHeight,
        arraysPic:[{
          id:1,
          srcs:require('../assets/images/product/pro00.png'),
          tit:"全方位运营实时数据"
        },
          {
            id: 2,
            srcs: require('../assets/images/product/pro01.png'),
            tit:"多角度品牌评估数据"
          },
          {
            id: 3,
            srcs: require('../assets/images/product/pro02.png'),
            tit:"多个时间维度的数据化展示"
          },
          {
            id: 4,
            srcs: require('../assets/images/product/pro03.png'),
            tit:"角色化层级化可视化数据"
          }],
        arraysPic1:[{
          id:5,
          srcs:require('../assets/images/product/pro10.png'),
          tit:"及时反馈工作正向和反向结果"
        },
          {
            id: 6,
            srcs: require('../assets/images/product/pro11.png'),
            tit:"实时提醒日常工作内容"
          },
          {
            id: 7,
            srcs: require('../assets/images/product/pro12.png'),
            tit:"清晰了解本职工作及个人状态"
          },
          {
            id: 8,
            srcs: require('../assets/images/product/pro13.png'),
            tit:"工作结果与绩效挂钩，提高重视度"
          }],
        arraysPic2:[{
          id:9,
          srcs:require('../assets/images/product/pro20.png'),
          tit:"工作计划全网络，针对性推送，实现快速、精准实施"
        },
          {
            id: 10,
            srcs: require('../assets/images/product/pro21.png'),
            tit:"化繁为简，整理公司全部运营标准、流程、制度"
          },
          {
            id: 11,
            srcs: require('../assets/images/product/pro22.png'),
            tit:"设定公司架构及人员，实现公司管理节点化"
          },
          {
            id: 12,
            srcs: require('../assets/images/product/pro23.png'),
            tit:"运营体系板块化操作，界面简单直观"

          }]
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{

    },
    components:{
      navigators,
      scrolls
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   @import'../css/product.css';
</style>


